<template>
  <div class="menuEdit">
    <Form :model="formItem" :label-width="120" class="menuForm" :rules="ruleValidate">
      <div>
        <div>
          <div class="item-title">
            <div>
              <span style="color:red">*</span>
              <span>会员信息</span>
            </div>
            <div class="item-title-notice">会员权益每月更新一次，自开通日期起，每月自动更新，未使用权益到期自动作废</div>
          </div>
        </div>

        <div>
          <FormItem label="会员名称" class="menu_name" prop="member_name">
            <Input v-model="formItem.member_name" placeholder="请输入套餐名称" style="width:200px;"></Input>
          </FormItem>
        </div>
      </div>
      <div class="member-rights">
        <div class="member-rights-title">
          <span style="color:red">*</span>
          <span>会员权益</span>
        </div>
        <div class="member-rights-item">
          <FormItem label="发布职位次数">
            <InputNumber
              :min="0"
              v-model="formItem.publish_job_times"
              placeholder="请输入数字"
              style="width:200px;"
              @on-change="input_publish_job_times"
            ></InputNumber>
            <div>0则不显示在套餐中，发布后，重新发布即为刷新一次</div>
          </FormItem>
          <FormItem label="刷新职位次数">
            <InputNumber
              :min="0"
              v-model="formItem.refresh_job_times"
              placeholder="请输入数字"
              style="width:200px;"
              @on-change="input_refresh_job_times"
            ></InputNumber>
            <div>0则不显示在套餐中，发布新职位即为发布一次</div>
          </FormItem>
          <FormItem label="免费查看简历份数">
            <InputNumber
              :min="0"
              v-model="formItem.free_resume_times"
              placeholder="请输入数字"
              style="width:200px;"
              @on-change="input_free_resume_times"
            ></InputNumber>
            <div>0则不显示在套餐中，可免费查看简历份数，拨打用户电话</div>
          </FormItem>
        </div>
      </div>

      <div>
        <div>
          <div class="item-title">
            <div>
              <!-- <span style="color:red">*</span> -->
              <span>会员类型</span>
            </div>
            <div class="item-type-notice">会员日期续费选择</div>
          </div>

          <div class="member-type">
            <div class="member-type-item">
              <FormItem label="会员类型">
                <div>
                  <CheckboxGroup
                    v-model="checkAllGroup"
                    @on-change="checkAllGroupChange"
                    class="positionChoice"
                  >
                    <Checkbox
                      v-for="(item,index) in formItem.member_price_json"
                      :key="index"
                      class="choiceItem"
                      :label="item.id"
                    >
                      <span class="item-name">{{item.name}}</span>
                      <InputNumber
                        :min="0"
                        v-model="item.price"
                        class="price-input"
                        style="width:100px"
                      ></InputNumber>&nbsp&nbsp元
                    </Checkbox>
                  </CheckboxGroup>
                </div>
              </FormItem>
            </div>
          </div>
        </div>
      </div>
      <FormItem>
        <div class="confirm-button">
          <Button type="primary" @click="memberUpdate">保存</Button>
        </div>
      </FormItem>
    </Form>
  </div>
</template>
<style>
</style>
<script>
import { memberCreate, memberEdit } from "api/recuit/companyMenu.js";
import { objectDeepCopy } from "common/js/util";
import Config from '@/config'
import _ from 'lodash'

export default {
  name: "Edit",
  data () {
    return {
      formItem: {
        member_config_id: '',
        saas_id: '',
        member_name: '',
        publish_job_times: '',
        refresh_job_times: '',
        free_resume_times: '',
        member_price_json: '',
      },
      checkAllGroup: [],
      initMemberList: [
        {
          "id": 1,
          "name": "月度（1个月）",
          "price": '',
          "num": 1,
          "is_open": true,
          "is_effect": true
        },
        {
          "id": 2,
          "name": "季度（3个月）",
          "price": '',
          "num": 3,
          "is_open": true,
          "is_effect": true
        },
        {
          "id": 3,
          "name": "半年度（6个月）",
          "price": '',
          "num": 6,
          "is_open": true,
          "is_effect": true
        },
        {
          "id": 4,
          "name": "年度（12个月）",
          "price": '',
          "num": 12,
          "is_open": false,
          "is_effect": true
        },
        {
          "id": 5,
          "name": "2年度（24个月）",
          "price": '',
          "num": 24,
          "is_open": false,
          "is_effect": false
        }
      ],
      //表单规则
      ruleValidate: {
        member_name: [
          { required: true, message: '请填写会员名称', trigger: 'blur' },
          { type: 'string', max: 10, message: '字数限制在10字内', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    //编辑套餐
    memberEdit().then(res => {
      if (res) {
        const { priceCol, priceIdList } = this.formatMemberList(res.member_price_json)
        this.checkAllGroup = priceIdList
        res.member_price_json = priceCol

        this.formItem = res;

        // console.log(this.formItem, 232323)
      } else {
        this.formItem.member_price_json = this.initMemberList
      }
      console.log(this.formItem.member_price_json)

    }).catch((error) => {
      this.$Message.error(error);
    });

  },
  components: {},
  methods: {
    //初始化数据
    formatMemberList (pricedata) {
      if (_.isString(pricedata)) {
        let priceList = JSON.parse(pricedata)
        let priceIdList = [];
        // 过滤未生效的数据
        let result = _.filter(priceList, function (info) {
          if (info['is_effect'] && info['is_open']) {
            priceIdList.push(info['id'])
          }

          if (info['is_effect']) {
            return true
          }
        });

        return { priceCol: result, priceIdList: priceIdList }
      }
    },
    //checkbox选中触发事件，重置checkAllGroup
    checkAllGroupChange (priceIdList) {
      this.checkAllGroup = priceIdList;
    },
    memberUpdate () {
      let formItem = objectDeepCopy(this.formItem)
      if (!this.valiation(formItem)) {
        return;
      }

      let newPriceJson = []
      _(formItem.member_price_json).forEach((info) => {
        info.is_open = (_.indexOf(this.checkAllGroup, info.id) > -1) ? true : false

        newPriceJson.push(info)
      });

      formItem.member_price_json = JSON.stringify(newPriceJson)

      memberCreate(formItem).then(res => {
        this.$Message.success("操作成功");
        this.$router.go(0)
      }).catch((error) => {
        this.$Message.error(error);
      });
    },
    //校验必填项
    valiation (info) {
      if (
        !_.isNumber(info.publish_job_times) || !_.isNumber(info.refresh_job_times) || !_.isNumber(info.free_resume_times)
      ) {
        this.$Message.error("权益配置信息请填写自然数");
        return false;
      }
      return true;
    },
    input_publish_job_times (number) {
      this.formItem.publish_job_times = Math.round(number)
    },
    input_refresh_job_times (number) {
      this.formItem.refresh_job_times = Math.round(number)
    },
    input_free_resume_times (number) {
      this.formItem.free_resume_times = Math.round(number)
    }
  }
}
</script>
<style scoped lang="less">
.menuEdit {
  padding: 2%;
  background: white;
  .menuForm {
    width: 50%;
    .item-title {
      margin-bottom: 20px;
      padding: 8px 16px;
      font-weight: bolder;
      background-color: #f5f5f5;
      color: #333;
      width: 100vw;
      display: flex;
      .item-title-notice {
        color: red;
        transform: scale(0.9);
        margin-left: -16px;
      }
      .item-type-notice {
        color: red;
        transform: scale(0.9);
      }
    }
  }
  .member-rights {
    display: flex;
    width: 100vw;
    // flex-direction: column;
    .member-rights-title {
      margin-left: 56px;
      margin-top: 8px;
    }
    .member-rights-item {
      margin-left: 52px;
    }
  }
  .member-type {
    display: flex;
    width: 100vw;
    // flex-direction: column;
    .member-type-title {
      width: 75px;
      margin-left: 52px;
      margin-top: 8px;
    }
    .member-type-item {
      // margin-left: 52px;
      width: 100vw;
      .positionChoice {
        display: flex;
        flex-direction: column;
        .choiceItem {
          margin-bottom: 20px;
          .item-name {
            display: inline-block;
            width: 95px;
            margin-left: 5px;
          }
        }
      }
    }
  }
  .confirm-button {
    margin-left: 200px;
  }
}
</style>
